<template>
  <div id="login">
    <div id="biaoti">登录</div>
    <div id="info">
      <div class="phones">
        <img class="phone-icon" :src="phone" alt />
        <div class="phone-input">
          <span :class="['phone-Prefix','input-span-color-0']">+ 86</span>
          <input type="number" class="phone-dep" v-model="tel" />
        </div>
      </div>

      <div class="pwd">
        <img class="phone-icon" :src="lock" alt />
        <div class="phone-input">
          <input type="password" v-model="pwd" />
          <img src="../../assets/img/close.png" v-if="pwd.length>0" @click="del" alt />
        </div>
      </div>
    </div>
    <img id="img" :src="canToLogin?unloginbtn:loginbtn" alt @click="login" />
    <div id="caozuo">
      <div id="registered">
        <div @click="zhuce">立即注册</div>
        <div id="forget" @click="forget">忘记密码</div>
      </div>
    </div>
  </div>
</template>
<script>
import { _ajaxlogin } from "../../service/main.js";
export default {
  data() {
    return {
      userName: "",
      phone: require("../../assets/img/ph@2x.png"),
      lock: require("../../assets/img/locked@2x.png"),
      canToLogin: false,
      loginbtn: require("../../assets/img/lod.png"),
      unloginbtn: require("../../assets/img/blacklod.png"),
      tel: "",
      pwd: ""
    };
  },
  watch: {
    tel(newValue, oldValue) {
      if (this.pwd.trim().length > 0 && this.validatephone(this.tel)) {
        this.canToLogin = true;
      } else {
        this.canToLogin = false;
      }
    },
    pwd(newValue) {
      if (this.validatephone(this.tel)) {
        if (this.pwd.trim().length > 0) {
          this.canToLogin = true;
        } else {
          this.canToLogin = false;
        }
      } else {
        this.canToLogin = false;
      }
    }
  },
  activated() {
    (this.tel = ""), (this.pwd = "");
  },
  methods: {
    zhuce() {
      this.$router.push("/reg");
    },
    forget() {
      this.$router.push("/password/forget");
    },
    del() {
      this.pwd = "";
    },
    validatephone(val) {
      let nub = val.replace(/\s*/g, "").replace("+86", "");
      if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(nub)) {
        return false;
      }
      return true;
    },
    login() {
      let _this = this;
      if (!this.canToLogin) {
        return;
      }
      let nub = _this.tel.replace(/\s*/g, "").replace("+86", "");
      _ajaxlogin({ mobile: nub, password: _this.pwd }).then(res => {
        this.$toast(res.message);
        if (res.errcode == 1) {
          localStorage.setItem("user", JSON.stringify(res.data));
          this.$router.push("/indexs");
        }
      });
    }
  }
};
</script>
<style scoped>
#login {
  width: 100%;
  height: 100%;
  padding: 100px 80px 0 68px;
}
#biaoti {
  font-size: 27px;
  font-weight: 1000;
  color: #000;
  line-height: 27px;
}
.phones {
  width: 100%;
  height: 32px;
  margin-top: 90px;
}
.pwd {
  width: 100%;
  height: 32px;
  margin-top: 26px;
}
.phone-icon {
  width: 12px;
  display: inline-block;
  line-height: 32px;
  position: relative;
  top: 25px;
}
input {
  background: none;
  outline: none;
  border: none;
  height: 30px;
  line-height: 30px;
  font-family: "DINPro-Bold";
  font-size: 16px;
  letter-spacing: 0.05rem;
  color: #000;
  caret-color: #000;
}
.phone-input {
  display: inline-block;
  height: 30px;
  width: 220px;
  border-bottom: 1px solid rgb(204, 204, 204);
  margin: 0 0 0 20px;
}
.phone-input img {
  width: 20px;
  height: 20px;
  margin-left: 190px;
  margin-top: -60px;
}
.phone-dep {
  width: 70%;
}
.phone-Prefix {
  display: inline-block;
  font-family: "DINPro-Bold";
  font-size: 16px;
  margin-right: 4px;
  margin-top: -14px;
  /* letter-spacing: 0.05rem; */
}
.input-span-color-c {
  color: #ccc;
}
.input-span-color-0 {
  color: #000;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: rgb(204, 204, 204);
  font-size: 16px;
  font-family: "DINPro-Bold";
  line-height: 33px;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgb(204, 204, 204);
  font-size: 16px;
  font-family: "DINPro-Bold";
  line-height: 33px;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: rgb(204, 204, 204);
  font-size: 16px;
  font-family: "DINPro-Bold";
  line-height: 33px;
}

#btn {
  width: 240px;
  height: 36px;
  background-color: rgb(238, 238, 238);
  text-align: center;
  line-height: 36px;
  margin: 50px 0 0 0;
  color: rgb(153, 153, 153);
  font-weight: 1000;
  border-radius: 3px;
  font-size: 15px;
  font-family: 1000;
}
#registered {
  margin: 25px 0 0 0;
  font-weight: 800;
  color: rgb(204, 204, 204);
}
#forget {
  float: right;
  margin: -20px -10px 0 0;
}
#img {
  width: 260px;
  margin: 50px 0 0 -10px;
}
#inp img {
  width: 17px;
  height: 17px;
  margin: -55px 0 0 195px;
}
</style>